<template>
<div>
  <el-container>
    <el-header class="header" style="text-align: left">
      <!--返回上一页-->
      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack()">返回</el-button>
    </el-header>
    <el-container>
      <el-container>
        <el-main class="main">
          <!--阅卷内容开始-->
          <el-card class="box-card" style="margin-top: 20px;">
            <template>
              <!--绑定数据-->
              <div style="line-height: 30px;" v-for="(p,index) in examData" :key="p.questionId">
                <!--左上角小图标和题目序号-->
                <div id="tag">
                  <b style="color: powderblue;margin-left: 13px">{{index+1}}</b>

                  <!--考试题目及题目总分-->
                  <b id="title">题目:
                    {{p.questionContent}}
                  </b>
                </div>

                <!--学生解答内容-->
                <div style="padding: 2% 5%;text-align: left">
                  <b>学生解答：</b>
                  <p style="margin: 5px auto;text-indent: 2em;">{{p.userAnswer }}</p>
                </div>

                <!--参考解析-->
                <div style="padding: 2% 5%;text-align: left">
                  <b style="color: red">参考解析:</b>
                  <p style="margin: 5px auto;text-indent: 2em;">{{p.analysis}}</p>
                </div>

                <!--给学生打分(下拉选)-->
                <span id="daFen">
                      <b>请为学生评分：</b>
                      <el-select  id="scoreSelect" v-model="p.getScore" filterable placeholder="请输入此题得分">
                              <el-option v-for="sc in p.questionScore+1"
                                         :key="sc"
                                         :label="sc-1"
                                         :value="sc-1"
                                         style="color: #409EFF"></el-option>
                      </el-select>
                   <span id="totalSc">此题总分：{{p.questionScore }}分</span>
                </span>
                <el-divider><i class="el-icon-document"></i></el-divider>
              </div>
            </template>
          </el-card>
          <!--阅卷内容结束-->
        </el-main>
        <el-footer class="footer" style="text-align: center">

          <!--提交阅卷结果-->
          <el-button native-type="submit" type="success" icon="el-icon-s-claim" @click="submit()"> 提交阅卷</el-button>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</div>
</template>

<script>
import router from "@/router";

let localJwt = localStorage.getItem('localJwt');
export default {
  data(){
    return{
      //判断是否提交过阅卷结果,默认为false
      isMarking:false,
      //试卷数据
      examData:[],
      subScore:[],
      id:1,
    }
  },
  methods:{
    //退回上一页
    goBack(){
      if (!this.isMarking){
        if (confirm("尚未提交阅卷结果,不会保存结果,是否退出阅卷？")){
          this.$router.back();
        }
      }else {
        this.$router.back();
      }
    },
    submit(){
      if (confirm("是否提交阅卷结果？")){
        let url = 'http://localhost:9283/examRecord/'+this.id+'/scoreById';
        console.log('url =' + url);
        for (let i = 0; i <this.examData.length ; i++) {
          this.subScore[i] = this.examData[i].getScore;
        }
        this.axios
            .create({
              'headers': {
                'Authorization': localJwt
              }
            })
            .post(url,'subScore='+this.subScore).then((response) =>{
          let jsonResult = response.data;
          if (jsonResult.state==20000){
            alert('批改完成！辛苦了！')
            if (jsonResult.jwt!=null){
              localStorage.setItem("localJwt",jsonResult.jwt);
            }
          }else if(jsonResult.state==70100){
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
            this.$router.push('/')
          } else {
           this.$message.error(jsonResult.message)
          }
        });
        this.isMarking = true;
      }
    },
    loadList(id){
      let url = 'http://localhost:9283/examRecord/standard?id=' + id;
      console.log('url =' + url);

      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          })
          .get(url).then((response) =>{
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 20000){
          this.examData = jsonResult.data;
          if (jsonResult.jwt!=null){
            localStorage.setItem("localJwt",jsonResult.jwt);
          }
        }else if(jsonResult.state==70100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          this.$router.push('/')
        } else {
          this.$alert(jsonResult.message,'错误',{
            confirmButtonText:'确认',
            callback: action => {// eslint-disable-line no-unused-vars
              this.loadList();
            }
          })
        }
      });
    },
  },
  created:function (){

  },
  mounted() {
    if (location.search.indexOf("id")!=-1){
      this.examData.id =location.search.split("=")[1];
      console.log("试卷id = " + this.examData.id);
      this.id = this.examData.id;
      this.loadList(this.examData.id);
    }else {
      this.loadList(1);
    }
  }
}
</script>

<style scoped>
.header, .footer {
  background-color: rgba(97,154,195,1);
  color: #444;
  line-height: 60px;
}

.main {
  background-color: rgba(97,154,195,0.9);
  color: #333;
  text-align: center;
  font-size: 22px;
  line-height: 160px;
}
#tag{
  text-align: start;background-image: url('~@/assets/examTitle.png');
  background-repeat: no-repeat;background-color: #ace0f9;
}

#title{
  padding-left: 12px;color:  #000000;background-color: #ace0f9;
  text-align: center;display: inline-block;margin: 5px 15px;font-size: 26px;
}
#totalSc{
  position: relative;left: 120px
}
#daFen{
  color: orangered; display: inline-block;margin-bottom: 2%
}
#scoreSelect{
  width: 200px;color: #409EFF;font-size: 20px;
}
</style>
